<template>
  <div>
    <el-row :gutter="20" class="gl_my_15">
      <el-col :span="6" :lg="4">
        <el-button size="mini" type="primary" @click="openSchedule()">新增日程信息</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="tableLoading" class="gl_mt_5" :data="tableData" stripe size="mini" style="width: 100%">
      <el-table-column label="时间" align="left" :width="260">
        <template slot-scope="{ row }">
          {{ row.time && row.time.replace('T', ' ') }}{{ row.endTime && ('~' + row.endTime.replace('T', ' ')) }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="事件" :min-width="200" />
      <el-table-column prop="location" label="地点" :width="250" />
      <el-table-column prop="comment" label="备注" :width="250" />
      <el-table-column :label="$t('table.actions')" align="center" :width="180">
        <template slot-scope="{ row }">
          <el-button size="mini" type="text" @click="openSchedule(row)"> {{ $t('table.edit') }} </el-button>
          <el-button size="mini" type="text" @click="deleteSchedule(row)">
            <span class="gl_color_error">{{ $t('table.delete') }}</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <edit-schedule ref="editSchedule" @refreshPage="getScheduleList()" />
  </div>
</template>
<script>
import editSchedule from './editSchedule';
import {
  api_GET_EventsManagementCompetitionSchedule,
  api_DELETE_EventsManagementCompetitionScheduleId
} from '@/extend/api/gameswaggerApi/app';
export default {
  name: 'Schedule',
  components: {
    editSchedule
  },
  data() {
    return {
      tableData: []
    };
  },
  created() {
    this.gameId = this.$route.params.id;
    this.getScheduleList();
  },
  methods: {
    // 获取赛事日程列表
    getScheduleList() {
      this.tableLoading = true;
      api_GET_EventsManagementCompetitionSchedule({ competitionId: this.gameId }).then(res => {
        this.tableLoading = false;
        this.tableData = res.items || [];
      }, () => {
        this.tableLoading = false;
        this.$message({ type: 'error', message: '获取日程列表失败！' });
      });
    },
    openSchedule(row) {
      this.$refs.editSchedule.open(row);
    },
    // 删除
    deleteSchedule(schedule) {
      this.$confirm(`您确定要删除该日程吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true;
        api_DELETE_EventsManagementCompetitionScheduleId(schedule.id).then(() => {
          this.getScheduleList();
          this.$message({ type: 'success', message: '删除成功！' });
        }, () => {
          this.tableLoading = false;
          this.$message({ type: 'error', message: '删除失败！' });
        });
      }).catch(() => {});
    }
  }
};
</script>
